<template>
  <div>
    <!-- 头部导航栏 -->
    <NavTop v-show="!searchshow">
      <template #left>
        <van-icon name="wap-nav" class="animate__animated animate__fadeInLeft" @click="showPopup" />
      </template>
      <template #calendarbox1>
          <span>{{ date }}</span>
          <!-- <p>{{ userDiaryList.week }}&nbsp; &nbsp;{{ userDiaryList.time }}</p> -->
        </template>
      <template #right>
        <van-icon name="search" class="animate__animated animate__fadeInRight" @click="searchFn" />
      </template>
    </NavTop>
    <!-- <div class="calendarBody"> -->
      <!-- 下拉日历 -->
      <!-- <van-collapse v-model="activeNames" :border="false" :accordion="false"> -->
        <!-- <div class="calendarpopup" v-show="this.newnavshow">
          <van-sticky>
            <van-collapse-item :title="this.date" name="1">
              <van-calendar :poppable="false" :show-confirm="false" :show-title="false" />
            </van-collapse-item>
          </van-sticky>
        </div> -->
        <div class="mainpopup">
          <!-- <van-collapse-item title="标题2" name="2" disabled> -->
            <!-- 日记主体 -->
            <div class="main">
              <!-- <div class="main-top">共{{ diaryNum }}篇</div> -->
              <MainBody v-show="diaryShow"></MainBody>
              <searchDiary v-show="!diaryShow" :searchDiaryList="searchDiaryList"></searchDiary>
            </div>
          <!-- </van-collapse-item> -->
        <!-- </div> -->
      <!-- </van-collapse> -->
    </div>
    <!-- 搜索框 -->
    <form action="/" autofocus>
      <van-search v-model="searchValue" v-show="searchshow" show-action placeholder="请输入搜索关键词" @input="onSearch" @cancel="onCancel" />
    </form>
    <!-- 左侧用户弹出层 -->
    <van-popup v-model="show" position="left" :style="{ height: '100%', width: '65%' }" duration="0.2">
      <div class="bgc">
        <span class="longinSpan" @click="goLoginFn">{{ nickname === "" ? email : nickname }}</span>
      </div>
      <div class="sidebar">
        <ul>
          <li @click="tongjiFn">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tongji"></use>
            </svg>
            <span>统计</span>
          </li>
          <!-- <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-moon"></use>
            </svg>
            <span>夜间</span>
            <van-switch v-model="checked" active-color="#6ed9a2" inactive-color="#dcdee0" @click="switchChange" />
          </li> -->
          <li @click="huichouFn">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-huishouzhan"></use>
            </svg>
            <span>回收</span>
          </li>

          <li @click="shezhiFn">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shezhi"></use>
            </svg>
            <span>设置</span>
          </li>
        </ul>
      </div>
    </van-popup>
    <!-- 添加日记加号按钮· -->
    <div class="addiary animate__animated animate__fadeInRightBig" @click="showAdd" v-show="this.$store.state.AddbuttonShow">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-jiahao1"></use>
      </svg>
    </div>
    <!-- 登录成功显示通知 -->
    <LNotify :visible="visibleShow" :loading="loadingShow" :title="loginErr">
      <template #iconOk>
        <van-icon name="thumb-circle" class="iconOk" />
      </template>
    </LNotify>
  </div>
</template>

<script>
import MainBody from '@/components/home/homeMainBody.vue'
import NavTop from '@/components/home/homenNavTop.vue'
import searchDiary from '@/components/diary/searchDiaryBody.vue'
import LNotify from '@/components/packaging/L-Notify.vue'
export default {
  name: 'homeIndex',
  data () {
    return {
      show: false, // 左侧用户弹出层显示
      activeNames: ['2'],
      newnavshow: 'true', // 下拉日历显示
      // checked: false, // 夜 / 白 模式切换
      searchValue: '', // 搜索框内容
      searchshow: false, // 搜索框显示
      searchDiaryList: [], // 用户 搜索 返回 的日记
      navshow: true,
      date: '', // 月日
      week: '', // 星期
      time: '', // 时间
      getdate: '', // 发送给后端的格式   年月日
      // 用户昵称
      nickname: '',
      // 用户账号(电话号码)
      email: '',
      // 控制 日记 组件   => 搜索日记数据 和 用户日记数据 切换
      diaryShow: true,
      // // 点击添加按钮 / 编辑按钮 的显示
      buttonShow: false,
      // 登录成功通知
      visibleShow: false, // 弹窗组件 显示
      loadingShow: false, // 加载动画 显示
      loginErr: '登录成功' // 通知文字
    }
  },
  methods: {
    showPopup () {
      this.show = true
    },
    goLoginFn () {
      this.$router.replace('/useredit')
    },
    // 点击添加日记按钮
    showAdd () {
      this.searchshow = false
      this.time = this.$moment().format('LT')
      this.$router.replace('/addDiary')
    },
    // 点击搜索框
    searchFn () {
      this.searchshow = true
      this.navshow = false
      this.diaryShow = false
    },
    // 点击搜索取消
    onCancel () {
      this.searchshow = false
      // this.searchshow = true
    },
    // test (正则匹配) 查询 用户日记 数据
    searchDiaryFn (userDiaryList, searchValue) {
      const reg = new RegExp(searchValue)
      const arr = []
      // console.log(userDiaryList)
      if (userDiaryList !== undefined) {
        for (let i = 0; i < userDiaryList.length; i++) {
          if (reg.test(userDiaryList[i].content)) {
            arr.push(userDiaryList[i])
          }
        }
      }
      return arr
    },
    // 搜索 用户日记
    onSearch (val) {
      // 用户 添加/删除 日记 => 都会请求用户日记(日记已经存储到vuex,以及渲染出来了)
      // => 只需要在 用户日记数据数组中 查找 => 返回渲染
      this.searchDiaryList = this.searchDiaryFn(this.$store.state.userDiaryList, val)
      // console.log(this.searchDiaryList)
      this.$store.commit('searchDiaryNum', this.searchDiaryList.length)
    },
    // 点击统计
    tongjiFn () {
      this.$router.replace('/statistics')
    },
    // 点击回收
    huichouFn () {
      this.$router.replace('/recycle')
    },
    // 点击设置
    shezhiFn () {
      this.$router.replace('/set')
    }
  },
  components: {
    MainBody,
    NavTop,
    searchDiary,
    LNotify
  },
  created () {
    this.date = this.$moment().format('MM月DD日')
    this.week = this.$moment().format('dddd')
    this.time = this.$moment().format('LT')
    this.getdate = this.$moment().format('l')
    this.diaryNum = this.$store.state.diaryNum
  },
  activated () {
    this.diaryShow = true
    this.$store.commit('setButtonShow', true)
    // console.log(this.$route.params.LoginOkMsg)
    this.visibleShow = this.$route.params.LoginOkMsg
    this.email = this.$store.state.userInfoData.email
    this.nickname = this.$store.state.userInfoData.nickname
    this.onSearch()
    setTimeout(() => {
      this.visibleShow = false
    }, 1500)

    this.show = false
    this.$store.commit('setArticleTime', [this.getdate, this.week, this.time])
  }
}
</script>

<style lang="less" scoped>
.top[data-v-a967a83e]{
  background-color: #fff;
}
/deep/.van-search--show-action {
  width: 100%;
  position: fixed;
  top: 0;
  height: 66px !important;
  padding: 5px 20px;
  z-index: 9999;
}
/deep/.van-calendar__header {
  box-shadow: 0 0.05333rem 0.26667rem rgb(255 255 255 / 16%);
}
/deep/.van-calendar__selected-day {
  background-color: #6ed9a2;
}
.mainbox {
  height: 0;
}
/deep/.calendarpopup {
  .van-collapse-item__content {
    height: 320px;
    top: 0px;
    padding: 0 18px;
  }
  .van-cell {
    z-index: 999;
    width: 140px;
    left: 32%;
    padding: 20px;
  }
}
/deep/.mainpopup {
  padding: 60px 20px;
  .van-cell {
    display: none;
  }
  .van-collapse-item__content {
    height: 100%;
    top: 0px;
    padding: 0 18px;
  }
}
/deep/.van-cell::after {
  border-bottom: 0;
}
.calendarBody {
  // margin-top: 50px;
  // height: 320px;
  position: absolute;
  top: 0;
  width: 100%;
  /deep/.van-calendar__day {
    height: 40px;
  }
  /deep/.van-calendar__selected-day {
    width: 40px;
    height: 40px;
  }
  .van-collapse-item {
    text-align: center;
    // position: relative;
    background-color: #fff;
  }
  /depp/.van-calendar__header-subtitle,
  .van-calendar__header-title {
    height: 50px;
  }
  /deep/.van-calendar__month-title {
    height: 30px;
    line-height: 30px;
  }

  /deep/.van-overlay {
    background-color: rgba(0, 0, 0, 0.6);
  }
}
.addiary {
  width: 50px;
  background-color: #6ed9a2;
  height: 50px;
  border-radius: 50%;
  position: fixed;
  bottom: 30px;
  right: 30px;
  text-align: center;
  box-shadow: 0px 0px 15px -2px;
  .icon {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 30%;
    left: 32%;
    fill: #ffffff;
  }
}
/deep/.van-sticky {
  background-color: #fff;
}
.bgc {
  width: 100%;
  height: 140px;
  background-image: url("/src/assets/bgc.png");
  background-size: 100% 100%;
  position: relative;
  .longinSpan {
    color: white;
    font-size: 18px;
    position: absolute;
    bottom: 20px;
    left: 20px;
  }
}
.sidebar {
  li {
    height: 40px;
    // background-color: green;
    // border-bottom: 1px solid red;
    margin-top: 25px;
    display: flex;
    align-items: center;
    position: relative;
    .icon {
      width: 18px;
      height: 18px;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
      color: #646566;
      margin: 0 20px;
    }
    span {
      font-size: 16px;
      font-weight: 510;
      color: #6c6b6b;
    }
    .van-switch {
      position: absolute;
      right: 20px;
      font-size: 20px;
    }
  }
}
/deep/.van-search--show-action {
  width: 100%;
  position: fixed;
  top: 0;
  height: 60px;
  padding: 10px 20px;
  z-index: 9999;
}
.van-search__content {
  background-color: #ebedf0;
  border-radius: 10px;
}
.van-search__action {
  padding-left: 10px;
  font-size: 16px;
}
/deep/.van-field__left-icon .van-icon,
.van-field__right-icon .van-icon {
  display: block;
  font-size: 22px;
  line-height: inherit;
  color: #c8c9cc;
}
</style>
